<template>
  <div class="login">
    <!-- 头部logo -->
    <div class="top-logo">
      <div class="logo">
        <img :src="logo"
             alt=""
             style="width:100%">
      </div>
    </div>
    <!-- 表单 -->
    <van-form @submit="onSubmit"
              @failed="onFailed">
      <!-- TODO:用户名 -->
      <van-field v-model="username"
                 left-icon="phone-o"
                 name="username"
                 placeholder="请输入用户名"
                 :rules="[{ required: true, message: '' }]" />

      <!-- TODO:密码 -->
      <van-field v-model="password"
                 left-icon="lock"
                 name="password"
                 placeholder="请输入密码"
                 :rules="[{required: true , message: '' }]" />
      <!-- TODO:验证码 -->
      <div class="verify-box">
        <van-field v-model="validation"
                   left-icon="shield-o"
                   name="valcode"
                   placeholder="请输入验证码"
                   :rules="[{ required: true, message: '' }]" />
        <div id="verify-code"
             @click="verifyCodeTab"
             style="height:40px"></div>
      </div>
      <!-- TODO:提交按钮 -->
      <div style="width:70%">
        <van-button round
                    block
                    native-type="submit"
                    class="login-btn">登录</van-button>
      </div>
    </van-form>
    <!-- 其他登录 -->
    <div class="login-other">
      <span>手机号登录</span>
      <span @click="$router.push('/register')">注册入口</span>
    </div>
  </div>
</template>

<script>
import { GVerify } from '@/utils/verifycode'
import logo from '@/assets/image/log.png'
import { login } from '@/api/main'
import { saveToken } from '@/utils/token'
export default {
  data() {
    return {
      logo: logo,
      username: '',
      password: '',
      validation: '', // 表单验证码
      verifyCode: '', //生成的验证码
      gverifyObj: null // 验证码对象
    }
  },
  methods: {
    async onSubmit(userinfo) {
      //验证码校验
      let verfalg = this.validation == this.verifyCode
      // 校验成功
      if (verfalg) {
        console.log('username+' + userinfo.username)
        console.log('password+' + userinfo.password)
        let res = await login(userinfo.username, userinfo.password)
        console.log(res)
        if (res.status == 200) {
          // 存储token,用户，昵称
          saveToken(res.token, res.user_phone, res.nickname)
          this.$router.push('/')
        }
      } else {
        this.$toast('验证码错误')
      }   
    },
    onFailed() {
      this.$toast.fail({
        message: '格式不对',
        duration: 500
      })
    },
    // 更改验证码
    verifyCodeTab() {
      console.log(this.gverifyObj)
      this.verifyCode = this.gverifyObj.options.code.slice(-4)
    }
  },
  mounted() {
    this.gverifyObj = new GVerify('verify-code')
    console.log(this.gverifyObj)
    this.verifyCode = this.gverifyObj.options.code
  }
}
</script>

<style scoped lang="less">
/* logo */
.top-logo {
  display: flex;
  height: 6.8667rem;
  background-color: #e87b61;
  .logo {
    margin: auto;
    width: 40%;
  }
}
/* 表单 */
::v-deep.van-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 1.0667rem;
  align-items: center;
  .van-field {
    width: 80%;
    padding: 0.5867rem 0 0.2667rem;
    border-bottom: 1px solid #ccc;
    font-size: 0.4267rem;
    /* TODO:左侧图标 */
    .van-field__left-icon {
      padding-right: 0.2667rem;
      font-size: 1.0667rem;
      .van-icon {
        font-size: 0.64rem;
      }
    }
  }
  /* TODO:验证码 */
  .verify-box {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .van-field {
      width: 60%;
    }
  }
  .login-btn {
    margin-top: 1.7333rem;
    font-size: 0.5333rem;
    letter-spacing: 0.4rem;
    text-indent: 0.4rem;
    color: #fff;
    background-color: #e87b61;
  }
}
/* 其他登录 */
.login-other {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  padding: 0 5% 0.6667rem;
  justify-content: space-between;
  font-size: 0.4267rem;
  box-sizing: border-box;
}
</style>